<template>
	<div class="ele-body">
		<a-card :bordered="false">
			<!-- 搜索表单 -->
			<OrderSearch @search="reload" />
			<!-- 表格 -->
			<ele-pro-table ref="tableRef" row-key="id" :columns="(columns as any)" :datasource="datasource"
				v-model:selection="selection" :toolkit="null" :scroll="{ x: 800 }">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'image'">
						<img :src="record.image" :width="200" />
					</template>
					<template v-if="column.key === 'orderStatus'">
						<span>
						  <a-tag v-if="record.orderStatus === 2"  color="green">通过</a-tag>
						  <a-tag v-else-if="record.orderStatus === 3"  color="volcano">拒绝</a-tag>
						  <a-tag v-else-if="record.orderStatus === 5"  color="green">完成</a-tag>
						  <a-tag v-else  color="geekblue">未处理</a-tag>

						</span>
					</template>
					<!-- <template v-if="column.key === 'status'">
						<span>
						  <a-tag v-if="record.status === 1"  color="volcano">满房</a-tag>
						  <a-tag v-else  color="green">闲置</a-tag>
						</span>
					</template> -->
					<template v-if="column.key === 'action'">
						<a-space>
							<a @click="shenhe(record)">审核</a>
							<a-divider type="vertical" />
							<a @click="checkOut(record)">退房</a>
						</a-space>
					</template>
				</template>
			</ele-pro-table>
		</a-card>
	</div>
	<!-- 编辑弹窗 -->
	<OrderEdit v-model:visible="showEdit" :data="current" @done="reload" />
	<OrderShenhe v-model:visible="showEdit1" :data="current" @done="reload" />
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { message } from 'ant-design-vue';
	import type { EleProTable } from 'ele-admin-pro';
	import type {
		DatasourceFunction,
		ColumnItem
	} from 'ele-admin-pro/es/ele-pro-table';
	import { toDateString } from 'ele-admin-pro';
	import OrderSearch from './components/Order-search.vue';
	import OrderEdit from './components/Order-edit.vue';
	import OrderShenhe from './components/Order-shenhe.vue';
	import { pageOrders,updateOrder } from '@/api/neirong/order';
	import type { Order, OrderParam } from '@/api/neirong/order/model';

	// 表格实例
	const tableRef = ref<InstanceType<typeof EleProTable>>();

	// 表格列配置
	const columns = ref<ColumnItem[]>([
		// {
		// 	key: 'index',
		// 	width: 48,
		// 	align: 'center',
		// 	fixed: 'left',
		// 	hideInSetting: true,
		// 	customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
		// },
		{
			title: '订单Id',
			dataIndex: 'id',
			sorter: true
		},
		{
			title: '缩略图',
			key: 'image',
			dataIndex: 'image',
			sorter: true,
			showSorterTooltip: false,
			ellipsis: true
		},
		{
			title: '民宿名称',
			dataIndex: 'homestayName',
			sorter: true
		},
		{
			title: '下单人用户名',
			dataIndex: 'username',
			sorter: true,
		},
		{
			title: '下单人昵称',
			dataIndex: 'nickname',
			sorter: true
		},
		{
			title: '入住时间',
			dataIndex: 'liveDate',
			sorter: true,
			ellipsis: true,
			customRender: ({ text }) => toDateString(text)
		},
		{
			title: '入住天数',
			dataIndex: 'days',
			sorter: true
		},
		{
			title: '总价',
			dataIndex: 'totalPrice',
			sorter: true,
			// 
		},
		{
		  title: '订单状态',
		  dataIndex: 'orderStatus',
		  key: 'orderStatus',
		  sorter: true
		},
		{
		  title: '民宿状态',
		  dataIndex: 'status',
		  key: 'status',
		  sorter: true
		},
		{
			title: '民宿Id',
			dataIndex: 'homestayId',
			sorter: true
		},
		{
			title: '操作',
			key: 'action',
			width: 200,
			align: 'center',
			hideInSetting: true
		}
	]);

	// 表格选中数据
	const selection = ref<Order[]>([]);

	// 当前编辑数据
	const current = ref<Order>();

	// 是否显示编辑弹窗
	const showEdit = ref(false);
	const showEdit1 = ref(false);

	// 表格数据源
	const datasource : DatasourceFunction = ({ page, limit, where, orders }) => {
		return pageOrders({ ...where, ...orders, page, limit });
	};

	/* 搜索 */
	const reload = (where ?: OrderParam) => {
		selection.value = [];
		tableRef?.value?.reload({ page: 1, where: where });
	};

	/* 打开编辑弹窗 */
	const openEdit = (row ?: Order) => {
		current.value = row;
		showEdit.value = true;
	};

	/* 打开编辑弹窗 */
	const shenhe = (row ?: Order) => {
		current.value = row;
		showEdit1.value = true;
	};
	/* 保存编辑 */
	const checkOut = (row ?: Order) => {
		let form={
			id : row?.id,
			orderStatus: 5,
			homestayId: row?.homestayId,
		}
		updateOrder(form)
			.then((msg) => {
				message.success(msg);
				reload()
			})
			.catch((e) => {
				message.error(e.message);
			});
	};


</script>

<script lang="ts">
	import { defineComponent } from 'vue';

	export default defineComponent({
		name: 'Order'
	});
</script>